<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>彩妆热卖产品列表</title>
		<style type="text/css">
			*{padding: 0; margin: 0;}
			#p li div{
				display: none;
				text-align: center;
			}
			#p2 li div{
				display: none;
				text-align: center;
			}
			#p3 li div{
				display: none;
				text-align: center;
			}
			
			#p4 li div{
				display: none;
				text-align: center;
			}
			#p{
				width: 350px;
				border: 1px solid darkgrey;
				background-color: white;
			}
			#p1 .title{
				background-color: firebrick;
				color: white;
				font-size: 20px;
			}
			#p ul li a span{
				display: inline-block;
				border-radius: 50%; 
				text-align: center;
				background-color: dimgray;
				color: white;
				width: 35px;
				height: 35px;
				
			}
			a{text-decoration: none;
				color: black;
			}
			#p ul li{
				border: 1px darkgray dotted;
				/*height: 45px;*/
				line-height: 50px;
				
				}
			#p ul li a:hover span{
				background-color: firebrick;
			}
			#p ul li a:hover{
				color: firebrick;
			}
			#p a:hover div{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="p">
		<div id="p1">
			<p class="title">
				大家都喜欢的彩妆
			</p>
			<ul>
				<li>
					<a href="#"><span>1</span>Za姬芮新能真皙美白隔离霜 35g
						<div><img src="../img/icon-1.jpg" alt="Za姬芮新能真皙美白隔离霜 35g"/>
						<p>￥62.00 最近69122人购买</p>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div id="p2">
			<ul>
				<li>
					<a href="#"><span>2</span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml 
						<div><img src="../img/icon-2.jpg" alt="美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml " />
						<p>￥89.00 最近13610人购买</p>	
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div id="p3">
			<ul>
				<li>
					<a href="#"><span>3</span>菲奥娜水漾CC霜40g 
						<div><img src="../img/icon-3.jpg" alt="菲奥娜水漾CC霜40g " />
						<p>￥59.90 最近13403人购买</p>	
						</div>											
					</a>
				</li>
			</ul>
		</div>
		<div id="p4">
			<ul>
				<li>
					<a href="#"><span>4</span>DHC 蝶翠诗橄榄卸妆油 200ml 
						<div><img src="../img/icon-4.jpg" alt="DHC 蝶翠诗橄榄卸妆油 200ml  " />
						<p>￥169.00 最近16757人购买</p>	
						</div>	
					</a>
				</li>
			</ul>
		</div>
		</div>
	</body>
</html>
